<template>
	<view class="containar">
		<view class="top" :style="{'background-image': 'url('+settting+')' }">
			<image :src="avtar" style="width: 80px;height: 80px;border-radius: 50px;filter: blur(15);" @click="turn()"></image>
			<!-- 	<u-image :src="avtar" :lazy-load="true" class="img" shape="circle" radius="50px" width="80px" height="80px" style="filter: blur(5);">
			</u-image> -->
			<!-- <text>dsfsd</text> -->
		</view>
		<view class="grid">
			<u-grid :border="false" col="3" border="true">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="15" color="#2979ff">
					</u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="grid2">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list2" :key="listIndex" @click=grid(listItem.url,listIndex)>
					<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" name="static/icon_info/日记.png" :size="22"></u-icon> -->
					<image :src="listItem.name" style="width: 30px;height: 30px;"></image>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view style="margin-top: 30rpx;border-radius: 10px;" class="count">
			<u-cell-group>
				<u-cell title="负责声明" value="博主内容负责声明" isLink url="/pagesa/shengMing/shengMing">
					<u-icon color="#ff6123" slot="icon" size="32" name="coupon"></u-icon>
				</u-cell>
				<u-cell title="系统消息" value="查看系统实时消息" isLink url="/pagesa/systemNews/systemNews">
					<u-icon color="#ffffae" slot="icon" size="32" name="bell"></u-icon>
				</u-cell>
				<u-cell title="版本更新" :value="title" isLink @click="show1()">
					<u-icon color="#e9c5ff" slot="icon" size="32" name="calendar"></u-icon>
				</u-cell>
				<u-cell title="清除缓存" :value="size+'bit'" isLink @click="clear()">
					<u-icon color="#ffa05c" slot="icon" size="32" name="trash"></u-icon>
				</u-cell>
				<u-cell title="应用设置" value="进入系统常用设置" isLink url="/pagesa/ssetting/ssetting">
					<u-icon color="#544e47" slot="icon" size="32" name="setting">
					</u-icon>
				</u-cell>
			</u-cell-group>
			<view class="extra" style="display: flex;align-items: center;">
				<u-icon color="#479aff" slot="icon" size="32" name="question"></u-icon>
				<button open-type="feedback" class="item icon-arrow">意见反馈</button>
			</view>
			<button open-type="contact" style="border-radius: 0;background-color: aliceblue;">
				<view style="display: flex;align-items: center;justify-content: center;">
					<u-icon color="#51382e" slot="icon" size="32" name="account"></u-icon>
					<text>客服</text>
				</view>
			</button>
		</view>



	</view>

</template>
<script>
	export default {
		data() {
			return {
				settting: uni.getStorageSync("settings").memberBack,
				title: "当前版本v1.0.0",
				avtar: 'https://img1.baidu.com/it/u=2837426444,1036569200&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500',
				list: [{
						name: '0',
						title: '相册'
					},
					{
						name: '0',
						title: '图片'
					},
					{
						name: '0',
						title: '动态'
					},
					{
						name: '0',
						title: '账单笔数'
					},
					{
						name: '0',
						title: '账单天数'
					},
					{
						name: '0',
						title: '客户'
					},

				],
				user: uni.getStorageSync("user"),
				size: '',
				list2: [{
						name: '/static/icon_info/相册.png',
						title: '个人相册',
						url: '/pages/picture/picture'
					},
					{
						name: '/static/icon_info/账单.png',
						title: '个人账单',
						url: '/pages/account/account'
					},
					{
						name: '/static/icon_info/日记.png',
						title: '个人动态',
						url: '/pagesa/FrentsSi/FrentsSi'
					},
					{
						name: '/static/icon_info/个人中心.png',
						title: '个人中心',
						url: '/pagesa/usesrinfo/usesrinfo'
					},
				],
			};
		},
		onLoad(option) {
			let storageInfo = uni.getStorageInfoSync();
			this.size = storageInfo.currentSize;
			console.log(123, this.size)
			this.avtar = uni.getStorageSync("user").picUrl
			this.getList()
		},
		methods: {
			turn(){
				uni.navigateTo({
					url:'/pagesa/updateuser/updateuser'
				})
			},
			async getList() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pic/count?userId=' + this.user.id,
					method: 'post',
				})
				this.list[0].name=res.data.data.pics
				this.list[1].name=res.data.data.pic
				this.list[2].name=res.data.data.fre
				this.list[3].name=res.data.data.account
				this.list[4].name=res.data.data.accDay
				this.list[5].name=res.data.data.user
				console.log(res)
			},
			clear() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
					uni.clearStorageSync();
					uni.showToast({
						icon: "none",
						title: "清理成功"
					})
				}, 2000);
			},
			show1() {
				uni.showToast({
					title: this.title,
					icon: "none"
				})
			},
			grid(url, index) {
				if (index === 0 || index === 1) {
					uni.switchTab({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}

			}
		},
	}
</script>
<style lang="scss" scoped>
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.extra {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			margin-left: -10rpx;
			line-height: 1.5;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.icon-arrow {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}

	.containar {
		// background-color: #eeeeee;
		// cursor: pointer;		position: relative;

		.top {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 510rpx;
			background-size: cover;
			position: relative;
		}

		.top::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 510rpx;
			// background-image: url("https://www.10wallpaper.com/wallpaper/1280x800/1702/Rem_re_zero_girl-2016_Anime_HD_Wallpaper_1280x800.jpg");
			filter: blur(0.5px);
			z-index: -1;
			background-size: cover;
		}

		.grid {

			background-color: #fff;
			border-radius: 10px;
		}

		.grid2 {
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 160rpx;
			margin: 0 20rpx;
			background-color: #fff;
			position: relative;
			top: 20rpx;
		}

		.count {
			margin: 0 20rpx;
			height: 610rpx;
			border-radius: 6rpx;
			background-color: #fff;
			position: relative;
			top: 10rpx;
		}

	}
</style>
